<template>
    <!-- 产品详情-box -->
    <view class="good-info-box">
        <view class="good-info-flex">
            <view class="g-i-a">
                <!-- 手机号码 -->
                <view>
                    <text class="a-title">{{ phoneLbTxt }}</text>
                    <text>{{ cellphone ? cellphone : " 暂无手机号" }}</text>
                </view>
                <!-- 客户地址 -->
                <div class="data-li-info">
                    <text class="a-title">{{ adrrLbtxt }}</text>
                    <el-tooltip class="item" effect="dark"
                        :content="district ? `中国 ${district} ${address}` : '' + address" placement="top">
                        <span v-if="address" class="data-span"> {{ district ? `中国 ${district} ${address}` : '' +
                            address }}</span>
                        <span v-else>暂无地址</span>
                    </el-tooltip>
                </div>
                <!-- 客户等级 -->
                <view>
                    <text class="a-title">客户等级：</text>
                    <text @click="customerLevelFun" class="c-s-m icon-font icon-style">{{ getYyInfoData.grade_title ||
                        '未设置' }}&#xe600;</text>
                </view>
                <!-- 累计销售 -->
                <!-- <view>
                    <text class="a-title">{{
                        md == 15 ? "累计预约：" : countSaleLbTxt
                    }}</text>
                    <text class="c-s-m icon-font icon-style" @click="onClick"
                        >{{ amount ? " " + amount + " " : " 0 " }}&#xe600;</text
                    >
                </view> -->
            </view>
            <view class="g-i-a">
                <!-- 剩余服务 -->
                <view>
                    <text class="a-title">剩余服务：</text>
                    <text class="c-s-m icon-font icon-style" @click="getRemainingItems">{{ getYyInfoData.num_xm || 0
                        }}&#xe600;</text>
                </view>
                <!-- 默认报价 -->
                <view>
                    <text class="a-title">默认报价：</text>
                    <text>{{ getYyInfoData.yy_price_i_name || '--' }}</text>
                </view>
                <view class="data-li-info">
                    <text class="a-title">开放云店：</text>
                    <el-tooltip class="item" effect="dark" :content="getYyInfoData.yunid_name" placement="top">
                        <span class="data-span">{{ getYyInfoData.yunid_name || '--' }}</span>
                    </el-tooltip>
                </view>

            </view>
            <view class="g-i-a">
                <div class="data-li-info">
                    <text class="a-title">客户标签：</text>
                    <el-tooltip class="item" effect="dark" :content="getYyInfoData.tag_title" placement="top">
                        <span class="data-span">{{ getYyInfoData.tag_title || '--' }}</span>
                    </el-tooltip>
                </div>
                <view>
                    <text class="a-title">客户类别：</text>
                    <text class="c-s-m icon-font icon-style"> {{ getYyInfoData.typeid_name || '--' }}</text>
                </view>
                <view>
                    <text class="a-title">客户积分：</text>
                    <text class="c-s-m icon-font icon-style" @click="customerPointsIsShow()">{{ getYyInfoData.p_fract ||
                        0
                    }}&#xe600;</text>
                </view>
            </view>
            <view class="g-i-a">
                <div class="data-li-info">
                    <text class="a-title">备注说明：</text>
                    <el-tooltip class="item" effect="dark" :content="getYyInfoData.remark" placement="top">
                        <span class="data-span">{{ getYyInfoData.remark || '--' }}</span>
                    </el-tooltip>
                </div>
                <view>
                    <text class="a-title">经手人：</text>
                    <text class="c-s-m icon-font icon-style"> {{ getYyInfoData.uid_cp || '暂无备注' }}</text>
                </view>
                <view>
                    <text class="a-title">来源：</text>
                    <text class="c-s-m icon-font icon-style"> {{ getYyInfoData.from_name || '--' }}</text>
                </view>
            </view>
        </view>
        <div class="good-info-flex">
            <view class="g-i-a">
                <!-- 初始欠款： -->
                <view v-if="md != 15">
                    <text class="a-title">{{ startQkLbTxt }}</text>
                    <text class="price">{{ rece ? rece : "0" }}</text>
                </view>

                <!-- 预付款： -->
                <view>
                    <text class="a-title">{{ yfLbTxt }}</text>
                    <text class="price price-link" @click="onClickPrice">{{ money ? money : "0.00" }}</text>
                    <text class="icon-font icon-style price"> &#xe600;</text>
                </view>
                <!-- 订单应收： -->
                <view>
                    <text class="a-title">{{ ddysLbtxt }}</text>
                    <text class="price price-link" @click="onReceMoney">{{
                        price_count ? price_count : "0.00"
                    }}</text>
                    <text class="icon-font icon-style price"> &#xe600;</text>
                </view>
            </view>
            <view class="g-i-a">
                <view>
                    <text class="a-title">{{
                        md == 15 ? "累计预约：" : countSaleLbTxt
                        }}</text>
                    <text class="price-link price" @click="onClick">{{ amount ? amount : "0.00" }}</text>
                    <text class="icon-font icon-style price"> &#xe600;</text>
                </view>
                <!-- 累计预约 -->
                <view>
                    <text class="a-title">累计预约：</text>
                    <text class="price-link price" @click="onClick('yy')">{{ getYyInfoData.amount ?
                        getYyInfoData.amount : "0.00" }}</text>
                    <text class="icon-font icon-style price"> &#xe600;</text>
                </view>
            </view>
        </div>

        <el-dialog title="客户等级" :visible.sync="customerLevelShow" width="30%">
            <template v-if="ugd_ls && ugd_ls.length > 0">
                <div v-for="(row, rowIndex) in ugd_ls" :key="rowIndex">
                    <p class="title_p">{{ row.yunsp_title }}</p>
                    <el-radio-group v-model="row.grade" @change="changeGradeFun(row.grade, rowIndex)">
                        <el-radio :label="item.grade" v-for="(item, index) in row.grade_ls" :key="index">{{ item.title
                        }}</el-radio>
                    </el-radio-group>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button size="mini" @click="customerLevelShow = false">取 消</el-button>
                    <el-button size="mini" type="primary" @click="savesGradeFun">确 定</el-button>
                </span>
            </template>
            <div v-else style="padding-bottom: 60px;">
                <empty></empty>
            </div>
        </el-dialog>

        <CustomerPointsDrawer ref="customerPointsDrawerRef" :getYyInfoData="getYyInfoData"></CustomerPointsDrawer>
    </view>
</template>

<script>
import lang from "../../js/conf/Lang.js";
import config from "@/js/conf/Config.js";
import localStore from "../../js/LocalStore.js";
import customerPoints from "@/components/customers/customerPoints.vue"
import CustomerPointsDrawer from "@/components/customers/CustomerPointsDrawer.vue"

export default {
    components: {
        customerPoints,
        CustomerPointsDrawer,
    },
    props: [
        "cellphone",
        "district",
        "address",
        "amount",
        "rece",
        "price_count",
        "money",
        "md",
        "num_xm",
        "getYyInfoData",
        "isDrawerStatus"
    ],
    data() {
        return {
            phoneLbTxt: lang.customerTxt.phoneLbTxt,
            adrrLbtxt: lang.customerTxt.adrrLbtxt,
            countSaleLbTxt: lang.customerTxt.countSaleLbTxt,
            startQkLbTxt: lang.customerTxt.startQkLbTxt,
            yfLbTxt: lang.customerTxt.yfLbTxt,
            ddysLbtxt: lang.customerTxt.ddysLbtxt,

            customerLevelShow: false,
            radio: "",
            ugd_ls: [],
            ydgrade: [],
            drawerVisible: false,
        };
    },
    mounted() {
    },
    methods: {
        drawerClick() {
            if (this.issDrawerStatusFun()) return;
            this.$refs.drawerRef.open()
        },
        getRemainingItems() {
            if (this.issDrawerStatusFun()) return;
            this.$emit("getRemainingItems");
        },
        onClick(type) {
            if (this.issDrawerStatusFun()) return;
            this.$emit("countSaleMoney", type);
        },

        onClickPrice() {
            if (this.issDrawerStatusFun()) return;
            this.$emit("payMoneyRece");
        },
        onReceMoney() {
            if (this.issDrawerStatusFun()) return;
            this.$emit("receMoney");
        },
        customerPointsIsShow() {
            if (this.issDrawerStatusFun()) return;
            // 客户积分
            // this.$refs.customerPointsRef.open();
            this.$refs.customerPointsDrawerRef.open();
        },
        async getCustomerLevelData() {
            this.ydgrade = [];
            let cp = await localStore.getCpInfo();
            let param = {
                cpid: cp.id,
                customerid: this.getYyInfoData.id,
            }
            let url = config.CUSTOM_GRADE_LS;
            let res = await this.$api({ url: url, data: param });
            if (!res.data.ugd_ls) return false
            this.ugd_ls = res.data.ugd_ls || []
            let copyUgd = JSON.parse(JSON.stringify(this.ugd_ls))
            console.log("copyUgd=", copyUgd)
            copyUgd.forEach(item => {
                let filterArr = item.grade_ls.filter(row => {
                    return row.is_ck == 1;
                })
                item.grade = filterArr[0].grade;
                console.log(filterArr, 'filterArrfilterArrfilterArr')
                this.ydgrade.push({
                    grade: item.grade,
                    idyun: item.shopid_yd,
                })
            });
            this.ugd_ls = copyUgd || [];
            console.log(res, 'getCustomerLevelData')
        },
        async savesGradeFun() {
            let url = config.COMPANY_GRADE_SAVES;
            let param = {
                customerid: this.getYyInfoData.id,
                ydgrade: this.ydgrade,
            }

            let res = await this.$api({ url: url, data: param });
            if (res.status != 1) return false;
            this.ydgrade = [];
            this.$message({
                message: res.msg,
                type: 'success'
            });
            this.customerLevelShow = false;
            this.$emit('upInitData')
            this.getCustomerLevelData()
        },
        customerLevelFun() {
            if (this.issDrawerStatusFun()) return;
            this.getCustomerLevelData()
            this.customerLevelShow = true;
        },

        issDrawerStatusFun() {
            if (this.isDrawerStatus) {
                this.$message({
                    message: '暂不支持查看/操作',
                    type: 'warning'
                });
                return true;
            } else {
                return false;
            }
        },

        changeGradeFun(val, index) {
            let copyArr = JSON.parse(JSON.stringify(this.ydgrade));
            copyArr[index].grade = val;
            this.ydgrade = copyArr;
            console.log(this.ydgrade)
        }
    },
};
</script>

<style lang="scss" scoped>
// 产品详情-box
.good-info-box {
    ::v-deep .el-dialog__body {
        padding: 10px 0px 0px 0px !important;
    }

    .title_p {
        font-size: 14px;
        color: #000000;
    }

    padding-left: 20px;

    .good-info-flex {
        display: flex;
        border-bottom: 1px solid #eee;

        >.g-i-a {
            margin-right: 30px;
            border-bottom: none;
        }
    }

    .data-li-info {
        display: flex;

        >.data-span {
            display: block;
            max-width: 250px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
        }
    }

    .g-i-a {
        border-bottom: 1px solid #eee;
        padding: 10px 0;
        color: #333;
        font-size: 14px;

        .a-title {
            // color: #9FA0A8;
            font-size: 14px;
            color: #999;
            display: inline-block;
            width: 80px;
            text-align-last: justify;
            text-align: justify;
            text-justify: distribute-all-lines;

            &.gjjl-cur {
                cursor: pointer;
            }
        }

        .price {
            color: #f04848;
        }

        .price-link {
            cursor: pointer;
        }

        .price-link:hover {
            color: #ff0000;
        }

        .c-s-m {
            cursor: pointer;
        }

        .c-s-m:hover {
            color: #3388ff;
        }
    }
}
</style>
